<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Upload Single Image Use Ajax</title>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/ajaxfileupload.js"></script>
</head>
<body>
		<form name="form" action="" method="POST" enctype="multipart/form-data">
			<table cellpadding="0" cellspacing="0" class="tableForm">
				<tr>
					<td><input id="file" type="file" size="45" name="file" class="input"></td>			
				</tr>
				<tr>
					<td><button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button></td>
				</tr>
			</table>
		</form>    	
		<div id="loading" style="display:none">上传中</div>
</body>
<script type="text/javascript">
function ajaxFileUpload()
{
	//starting setting some animation when the ajax starts and completes
	$("#loading")
	.ajaxStart(function(){
		$(this).show();
	})
	.ajaxComplete(function(){
		$(this).hide();
	});
	
	/*
		prepareing ajax file upload
		url: the url of script file handling the uploaded files
                    fileElementId: the file type of input element id and it will be the index of  $_FILES Array()
		dataType: it support json, xml
		secureuri:use secure protocol
		success: call back function when the ajax complete
		error: callback function when the ajax failed
		
            */
	$.ajaxFileUpload
	(
		{
			url:'<%=request.getContextPath() %>/imgup/singleupload', 
			data:{albumid:'123'},
			secureuri:false,
			fileElementId:'file',
			dataType: 'json',
			success: function (data, status)
			{
				if(typeof(data.errflag) != 'undefined')
				{
					if(data.errflag)
					{
						alert("成功");
					}else
					{
						alert(data.errmsg);
					}
				}
			},
			error: function (data, status, e)
			{
				alert(e);
			}
		}
	)
	
	return false;

}  
</script>
</html>